<!--移动源环境管理_机动车-->
<template>
    <Layout>
        <Form ref="form1" :model="dataToQuery" :label-width="120">
            <Row class="query-form">
                <Col span="8">
                    <FormItem label="单位名称：" prop="order">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName'
                                      :orgTree="true" @setOrgname="setQueryOrgName"
                                      :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
								<Col span="8">
								    <FormItem label='归属：' prop='ascription'>
								        <Select v-model='dataToQuery.ascription' placeholder="请选择归属" class='query-form-el'>
								            <Option value="1">自持</Option>
								            <Option value="0">相关方</Option>
								        </Select>
								    </FormItem>
								</Col>
                <Col span="8" v-if="!switchFlag">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
								<Col span="8" v-else>
								    <FormItem label='动力来源：' prop='powerSource'>
								        <Select v-model='dataToQuery.powerSource' placeholder="请选择动力来源" label-in-value class='query-form-el'>
								            <Option value="1">电动</Option>
								            <Option value="2">燃油</Option>
														<Option value="3">燃气、氢能</Option>
								        </Select>
								    </FormItem>
								</Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
							  <Col span="8">
							  		<FormItem label='电动类别：' prop='electricType'>
							  				<Select v-model='dataToQuery.electricType' placeholder="请选择电动类别" label-in-value class='query-form-el'>
							  						<Option value="1">充电</Option>
							  						<Option value="2">换电</Option>
							  				</Select>
							  		</FormItem>
							  </Col>
							  <Col span="8" >
							      <FormItem label='排放标准：' prop='emissionStandard'>
							          <Select v-model='dataToQuery.emissionStandard' placeholder="请填写车辆排放标准" label-in-value class='query-form-el'>
							              <Option v-for="item in dictMap.emissionStandards" :value="item.codingCodeId"
							                      :key="item.codingCodeId">{{item.codingName }}
							              </Option>
							          </Select>
							      </FormItem>
							  </Col>
                <Col span="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                    <download-button :api="exportUrl" :queryForm="dataToQuery" />
                    <!-- <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出</Button> -->
                    <Button icon="md-cloud-upload" class="ivu-btn-add" @click="openUpload">导入机动车管理</Button>
                    <Button icon="md-download" class="ivu-btn-add" @click="downloadModel">下载模板</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows' :loading='pageStatus.loading' border :columns="columns1" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator/>
            </Col>
        </Row>
        <Modal :title="this.getModalTitle('重型载货运输车辆')" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=800 class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false" :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?160:null" :label-position="mode === 'view'?'right':'top'">
                       <!-- <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='所属二级集团：' prop='belongOrgId'>
                                    <div v-if="mode === 'view'">{{ dataToView.belongOrgName }}</div>
                                    <Select v-else class='query-form-el' placeholder="集团名称"  v-model='dataToView.belongOrgId' label-in-value @on-change="belongChange">
                                        <Option v-for="item in twoLevel" :value="item.orgId" :key="item.orgId">{{item.orgName}}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row> -->
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='单位名称：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                                    <div v-else>
                                      <cascader-dom  v-if="show"  class='query-form-el' ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true"
                                                      :currentOrgId="dataToView.companyId" :rootOrgId="currentUser.companyId"
                                                      :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
                                    </div>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='归属：' prop='ascription'>
                                    <div v-if="mode === 'view'">{{ dataToView.ascription =='1'?'自持':dataToView.ascription =='0'?'相关方':'' }}</div>
                                    <Select v-else v-model='dataToView.ascription' placeholder="请选择归属" label-in-value class='query-form-el'>
                                        <Option value="1">自持</Option>
                                        <Option value="0">相关方</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='动力来源：' prop='powerSource'>
                                    <div v-if="mode === 'view'">{{ dataToView.powerSource =='1'?'电动': dataToView.powerSource =='2'?'燃油': '燃气、氢能' }}</div>
                                    <Select v-else v-model='dataToView.powerSource' @on-change="createLevelChange" placeholder="请选择动力来源" label-in-value class='query-form-el'>
                                        <Option value="1">电动</Option>
                                        <Option value="2">燃油</Option>
																				<Option value="3">燃气、氢能</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col v-if="dataToView.powerSource != '1'" span="11">
                                <FormItem label='车辆排放标准：' prop='emissionStandard'>
                                    <div v-if="mode === 'view'">{{ dataToView.emissionStandardName }}</div>
                                    <Select v-else v-model='dataToView.emissionStandard' placeholder="请填写车辆排放标准" label-in-value class='query-form-el'>
                                        <Option v-for="item in dictMap.emissionStandards" :value="item.codingCodeId"
                                                :key="item.codingCodeId">{{item.codingName }}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11" v-if="dataToView.powerSource == '1'">
																<FormItem label='电动类别：' prop='electricType'>
																		<div v-if="mode === 'view'">{{ dataToView.electricType =='1'?'充电': dataToView.electricType =='2'?'换电': '' }}</div>
																		<Select v-else v-model='dataToView.electricType' placeholder="请选择电动类别" label-in-value class='query-form-el'>
																				<Option value="1">充电</Option>
																				<Option value="2">换电</Option>
																		</Select>
																</FormItem>
														</Col>
														<Col span="11" v-else></Col>
                        </Row>
                        <Row v-if="dataToView.powerSource != '1'" type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='是否安装烟气净化装置：' prop='purificationDevice'>
                                    <div v-if="mode === 'view'">{{ dataToView.purificationDevice =='1'?'是':dataToView.purificationDevice =='0'?'否':'' }}</div>
                                    <Select v-else v-model='dataToView.purificationDevice' placeholder="请选择是否安装烟气净化装置" label-in-value class='query-form-el'>
                                        <Option value="1">是</Option>
                                        <Option value="0">否</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='是否达标排放：' prop='standardDischarge'>
                                    <div v-if="mode === 'view'">{{ dataToView.standardDischarge=='1'?'是':dataToView.standardDischarge =='0'?'否':'' }}</div>
                                    <Select v-else v-model='dataToView.standardDischarge' placeholder="请选择是否达标排放" label-in-value class='query-form-el'>
                                        <Option value="1">是</Option>
                                        <Option value="0">否</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='车辆注册日期：' prop='registrationDate'>
                                    <div v-if="mode === 'view'">{{ renderViewDate(dataToView.registrationDate) }}</div>
                                    <DatePicker v-else class="query-form-el" placeholder="请选择车辆注册日期" v-model='dataToView.registrationDate' ></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='车牌：' prop='licensePlate'>
                                    <div v-if="mode === 'view'">{{ dataToView.licensePlate }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写车牌" type='text' v-model='dataToView.licensePlate'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem v-if="mode === 'view'" label="行驶证：">
                                    <div v-show="dataToView.idFiles.filter(t=>t.field==='1').length>0" v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='1')">
                                        <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                                        <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                                    </div>
                                </FormItem>
                                <FormItem v-else label="行驶证：" prop="idFiles">
                                    <div>
                                        <Upload ref="upload"
                                                :before-upload="(file) => { beforeUpload1(file, 'id', 'envVehicle/1') }"
                                                :show-upload-list="true"
                                                :max-size="10240"
                                                multiple
                                                type="drag"
                                                :action="fileUrl">
                                            <div style="padding: 10px">
                                                <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                                <p>点击将文件拖拽到这里上传</p>
                                                <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                                            </div>
                                        </Upload>
                                    </div>
                                    <div v-show="dataToView.idFiles.filter(t=>t.field==='1').length>0" v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='1')"
                                         :key='item'>
                                        <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                                        <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'envVehicle/1')" style="margin-left: 5px;margin-bottom: 3px"/>
                                        <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                                        <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row v-if="dataToView.powerSource != '1'" type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem v-if="mode === 'view'" label="随车清单：">
                                    <div v-show="dataToView.idFiles.filter(t=>t.field==='2').length>0" v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='2')">
                                        <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                                        <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                                    </div>
                                </FormItem>
                                <FormItem v-else label="随车清单：" prop="idFiles">
                                    <div>
                                        <Upload ref="upload"
                                                :before-upload="(file) => { beforeUpload1(file, 'id', 'envVehicle/2') }"
                                                :show-upload-list="true"
                                                :max-size="10240"
                                                multiple
                                                type="drag"
                                                :action="fileUrl">
                                            <div style="padding: 10px">
                                                <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                                <p>点击将文件拖拽到这里上传</p>
                                                <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                                            </div>
                                        </Upload>
                                    </div>
                                    <div v-show="dataToView.idFiles.filter(t=>t.field==='2').length>0" v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='2')" :key='item'>
                                        <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                                        <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'envVehicle/2')" style="margin-left: 5px;margin-bottom: 3px"/>
                                        <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                                        <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around"
                             class="code-row-bg">
                            <Col span="23">
                                <FormItem label="车辆正面照片：" prop="idFiles">
                                    <div class="demo-upload-list" v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='3')" :key="index">
                                        <img :src="uploadUrl+'/'+item.id">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="handleView(item.id)"></Icon>
                                            <Icon type="ios-trash-outline" v-if="mode !== 'view'" @click.native="removeFile1(item.id, 'id', 'envVehicle/3')"></Icon>
                                        </div>
                                    </div>
                                    <Upload
                                            v-if="mode !== 'view'"
                                            ref="upload"
                                            :show-upload-list="false"
                                            :format="['jpg','jpeg','png','gif']"
                                            accept="image/jpg, image/jpeg,image/png,image/gif,image/bmp"
                                            :max-size="1024"
                                            :before-upload="(file) => { beforeUpload1(file, 'id', 'envVehicle/3') }"
                                            multiple
                                            type="drag"
                                            :action="uploadUrl"
                                            style="display: inline-block;width:58px;">
                                        <div style="width: 58px;height:58px;line-height: 58px;">
                                            <Icon type="ios-camera" size="20"></Icon>
                                        </div>
                                    </Upload>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填报人：' prop='createUserName'>
                                    <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写填报人" type='text' readonly
                                           v-model='dataToView.createUserName'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填报时间：' prop='createDate'>
                                    <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                                    <DatePicker v-else class="query-form-el" placeholder="请选择填报时间" readonly
                                                v-model='dataToView.createDate'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填报人手机号：' prop='registrantPhone'>
                                    <div v-if="mode === 'view'">{{ dataToView.registrantPhone }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写填报人手机号" type='text'
                                           v-model='dataToView.registrantPhone'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11"></Col>
                        </Row>

                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定
                </Button>
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>

        <Modal :transfer=false title="批量导入" v-model="modal9" width="800">
            <Form ref="uploadItemData">
                <Row>
                    <i-col span="24">
                        <FormItem label='单位名称：' prop='companyId'>
                            <cascader-dom v-if="modal9" class='query-form-el' ref='orgCascader2' @setOrgInfo='setCompanyId2' @setOrgname="setCompanyName2" :orgTree="true"
                                          :currentOrgId="uploadMap.companyId"
                                          :setCurrentName="{label:uploadMap.companyName,value:uploadMap.companyId}" ></cascader-dom>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col span="24">
                        <Upload
                                name="file"
                                type="drag"
                                :format="['xlsx', 'xls']"
                                accept=".xlsx, .xls"
                                :before-upload="handleUpload "
                                action="//jsonplaceholder.typicode.com/posts/">
                            <div style="padding: 20px 0">
                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                <p>请上传xls、xlsx格式的文件</p>
                            </div>
                        </Upload>
                    </i-col>
                </Row>
                <div v-if="fileTrue">
                    <a>{{ uploadMap.file.name }}</a>
                    <Button type="text" icon="md-trash" @click="uploadMap.file = {},fileTrue = false" style="margin-left: 5px;margin-bottom: 3px"/>
                </div>
            </Form>
            <div slot="footer">
                <Button class='ivu-btn-save' :loading="buttonLoading" @click="submitFile()">上传</Button>
                <Button @click="modal9 = false" class="ivu-btn-cancel" >取消</Button>
            </div>
        </Modal>
        <Modal :transfer=false title="异常数据，请检查模板" v-model="modal10" width="800">
            <!-- <div :style="{height: divHeight, overflowY: 'auto', overflowX: 'hidden'}"> -->
                <Table ref='table3' :loading="loading3" border :columns="errorColumns" style="margin-top: 0px"
                       :data="errorInfos" width="100%" :height="500" highlight-row stripe size="small"></Table>
            <!-- </div> -->
            <div slot="footer">
                <Button class='ivu-btn-cancel' @click="modal10=false;errorInfos=[]">取消</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import {sessionStorage} from '@/common/cacheUtils.js';

var cascaderDom = () => import('@/components/cascader-dom.vue');

    export default {
        components: {
            cascaderDom
        },
        data() {
            return {
                ...this.createCommonDataField(),
                columns1: [
                    {title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'belongOrgName',title: '所属二级集团',  align: 'center', minWidth: 200, },
                    { key:'companyName',title: '单位名称',  align: 'center', minWidth: 200, },
                    { key:'ascription',title: '归属',  align: 'center', minWidth: 120,
                        render:(h, params) =>{return h('span', params.row.ascription=='1'?'自持':params.row.ascription=='0'?'相关方':'')}},
                    { key:'powerSource',title: '动力来源',  align: 'center', minWidth: 120,
                        render:(h, params) =>{return h('span', params.row.powerSource=='1'?'电动':params.row.powerSource=='2'?'燃油':'燃气、氢能')}},
                    { key:'electricType',title: '电动类别',  align: 'center', minWidth: 120,
                        render:(h, params) =>{return h('span', params.row.electricType=='1'?'充电':params.row.electricType=='2'?'换电':'')}},
                    { key:'emissionStandardName',title: '车辆排放标准',  align: 'center', minWidth: 120, },
                    { key:'purificationDevice',title: '是否安装烟气净化装置',  align: 'center', minWidth: 120,
                        render:(h, params) =>{return h('span', params.row.purificationDevice=='1'?'是':params.row.purificationDevice=='0'?'否':'')}},
                    { key:'standardDischarge',title: '是否达标排放',  align: 'center', minWidth: 120,
                        render:(h, params) =>{return h('span', params.row.standardDischarge=='1'?'是':params.row.standardDischarge=='0'?'否':'')}},
                    { key:'registrationDate',title: '车辆注册日期',  align: 'center', minWidth: 120,render: this.renderCellDate },
                    { key:'licensePlate',title: '车牌',  align: 'center', minWidth: 120, },
                    // { key:'createUserName',title: '填报人',  align: 'center',minWidth: 120, },
                    {key: 'createDate', title: '填报时间', align: 'center', minWidth: 120,render: this.renderCellDate},
                    // { key:'registrantPhone',title: '填报人手机号',  align: 'center',minWidth: 120, },
                    this.getActionColumns(),
                ],
                show:true,
                ruleCustom: {
                    belongOrgId: [ { required: true, message: '请填写所属二级集团', trigger: 'change',}],
                    companyId: [ { required: true, message: '请填写单位名称', trigger: 'change',}],
                    powerSource: [ { required: true, message: '请填写动力来源', trigger: 'change',}],
										electricType: [ { required: true, message: '请填写电动类别', trigger: 'change',}],
                    ascription: [ { required: true, message: '请填写归属', trigger: 'change',}],
                    purificationDevice: [ { required: true, message: '请填写是否安装烟气净化装置', trigger: 'change',}],
                    standardDischarge: [ { required: true, message: '请填写是否达标排放', trigger: 'change',}],
                    emissionStandard: [ { required: true, message: '请填写车辆排放标准', trigger: 'change',}],
                    registrationDate: [ { required: true, message: '请填写车辆注册日期', trigger: 'change',type:'date'}],
                    licensePlate: [ { required: true, message: '请填写车牌', trigger: 'change',}],
                    createUserName: [{required: true, message: '请填写填报人', trigger: 'change',}],
                    createDate: [{required: true, message: '请填写填报时间', trigger: 'change', type: 'date'}],
                    registrantPhone: [{
                        validator: (rule, value, callback) => {
                            if (!(/^1[3456789]\d{9}$/.test(this.dataToView.registrantPhone))) {
                                callback(' ');
                                // this.$Message.error("请填写有效的的手机号")
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'blur'
                    }],
                    idFiles: [{
                        validator: (rule, value, callback) => {
                            if (this.dataToView.idFiles.filter(t=>t.field==='1').length < 1||
                                (this.dataToView.powerSource != '1'&&this.dataToView.idFiles.filter(t=>t.field==='2').length < 1)||
                                this.dataToView.idFiles.filter(t=>t.field==='3').length < 1) {
                                callback('附件必须上传')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }]
                },
                tableHeight: 10,
                dictMap: {},
                punishment: false,
                penaltyAmount: true,
                // api
                queryUrl: Api.queryEnTable.replace('{{table}}', 'MobileSourceEnvVehicle'),
                exportUrl: Api.exportEnTable.replace('{{table}}', 'MobileSourceEnvVehicle'),
                deleteUrl: Api.deleteEnTable.replace('{{table}}', 'MobileSourceEnvVehicle'),
                getUrl: Api.getEnTable.replace('{{table}}', 'MobileSourceEnvVehicle'),
                updateUrl: Api.updateEnTable.replace('{{table}}', 'MobileSourceEnvVehicle'),
                saveUrl: Api.saveEnTable.replace('{{table}}', 'MobileSourceEnvVehicle'),
                uploadUrl: Api.uploadMongoFile,
                currentUser: JSON.parse(sessionStorage('userId').get('userId')),

                twoLevel:[],

                uploadMap:{},
                modal9: false,
                modal10: false,
                fileTrue: false,
                errorInfos: [],
                errorColumns: [
                    { key:'index',title: '序号', width: 70, align: 'center'},
                    { key:'ascription',title: '归属',  align: 'center', minWidth: 120,
                        render:(h, params) =>{return h('span', params.row.ascription=='1'?'自持':params.row.ascription=='0'?'相关方':'')}},
                    { key:'powerSource',title: '动力来源',  align: 'center', minWidth: 120,
                        render:(h, params) =>{return h('span', params.row.powerSource=='1'?'电动':params.row.powerSource=='2'?'燃油':'')}},
                    { key:'electricType',title: '电动类别',  align: 'center', minWidth: 120,
                        render:(h, params) =>{return h('span', params.row.electricType=='1'?'充电':params.row.electricType=='2'?'换电':'')}},
                    { key:'emissionStandardName',title: '车辆排放标准',  align: 'center', minWidth: 120, },
                    { key:'purificationDevice',title: '是否安装烟气净化装置',  align: 'center', minWidth: 120,
                        render:(h, params) =>{return h('span', params.row.purificationDevice=='1'?'是':params.row.purificationDevice=='0'?'否':'')}},
                    { key:'standardDischarge',title: '是否达标排放',  align: 'center', minWidth: 120,
                        render:(h, params) =>{return h('span', params.row.standardDischarge=='1'?'是':params.row.standardDischarge=='0'?'否':'')}},
                    { key:'registrationDate',title: '车辆注册日期',  align: 'center', minWidth: 120,render: this.renderCellDate },
                    { key:'licensePlate',title: '车牌',  align: 'center', minWidth: 120, },
                ],
            }
        },
        mounted() {
            this.setTableHeight();
            this.query();
            this.selectSecGroupNames()
            let _this = this
            this.gDic(Api.queryCodeDetailBySortId + "/env-00013", function (result) {
                _this.dictMap.emissionStandards = result;
            });
        },
        methods: {
            ...pageCommonFunction,
            setCompanyId2(data) {
                if (data && data instanceof Array && data.length > 0) {
                    this.$set(this.uploadMap, 'companyId', data[data.length - 1])
                }
            },
            setCompanyName2(data) {
                if (data) {
                    this.uploadMap.companyName = data;
                }
            },
            openUpload(){
                this.fileTrue = false
                this.uploadMap = {
                    companyId:this.currentUser.companyId,
                    companyName:this.currentUser.companyName,
                }
                this.modal9 = true;
            },
            handleUpload (file) {
                this.uploadMap.file = file;
                this.fileTrue = true;
                return false;
            },
            submitFile(){
                let formData = new FormData();
                formData.append("file", this.uploadMap.file);
                formData.append("companyId", this.uploadMap.companyId);
                formData.append("createUserId", this.currentUser.userId);
                formData.append("createOrgId", this.currentUser.orgInfo.orgId);
                this.$http.post(this.queryUrl + '/upload', formData).then((res) => {
                    if(res.data.status == 201){
                        this.$Message.error(res.data.msg);
                        this.modal10 = true;
                        let title = ['registrationDate','licensePlate','powerSource','ascription']
                        res.data.data.map((i=>{
                            let cellClassName = {}
                            for (let k in title) {
                                if (i[title[k]] == null){
                                    cellClassName[title[k]] = "table-info-cell-red";
                                }
                            }
                            i.cellClassName = cellClassName;
                        }));
                        this.errorInfos = res.data.data;
                    }else if(res.data.status == 200){
                        this.$Message.success("批量导入成功");
                        /* let dataItems = res.data.data
                         dataItems.forEach(item =>{
                             this.dataToView.items.push(item);
                         })*/
                        this.modal9 = false;
                        this.fileTrue = false
                        this.query()
                    }
                }).catch(e => {
                    console.log(e)
                    this.$Message.error("导入失败！请检查导入文档的格式是否正确");
                })
            },
            downloadModel(){
                this.$http.get(this.queryUrl + '/upload/model',{
                    params: {},
                    responseType: 'arraybuffer'
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel"
                    })
                    aLink.href = URL.createObjectURL(blob);
                    aLink.download = "机动车管理导入模板.xlsx" //标题
                    aLink.click();
                    document.body.appendChild(aLink);
                })
            },


            createLevelChange(value) {
                if (value.value == '1') {
                    this.dataToView.emissionStandard = null
                    this.dataToView.purificationDevice = null
                    this.dataToView.standardDischarge = null
                } else {
                    this.dataToView.electricType = null
                }
            },
            selectSecGroupNames(){
                this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
                    this.twoLevel=res.data.data
                }).catch(e => {
                })
            },
            belongChange(value) {
                this.$set(this.dataToView,'belongOrgId',value.value)
                this.$set(this.dataToView,'belongOrgName',value.label)
                this.dataToView.companyId = null
                this.dataToView.companyName = null
                this.$refs.orgCascader.resetCurrentOrg();
                this.show = false;
              setTimeout(() => {
                this.show = true
              }, 0)
            },
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            query() {
                // if(this.dataToQuery.eventTypeIdsArrays) {
                //     this.dataToQuery.eventTypeIds = this.arrayToInFormat(this.dataToQuery.eventTypeIdsArrays)
                // }
                // this.dataToQuery.orgId = this.currentUser.companyId;
                this.queryAjax();
            },

            submit(name) {
                this.submitAjax(name);
            },
            createEmptyDataToAdd() {
                return {
                    createDate: new Date(),
                    createUserId: this.currentUser.userId,
                    createUserName: this.currentUser.userName,
                    id: this.get_uuid(),
                    idFiles: [],
                }
            },
            async afterDataToViewInit() {
                await this.getFiles1('id', 'envVehicle');
            },
        },
        watch: {},
    }
</script>

<style lang='css' scoped>
    .ivu-form-item {
        padding-right: 20px;
    }

    .query-form-el, .ivu-date-picker, .ivu-input-wrapper {
        width: 100%;
    }

    .demo-upload-list{
        display: inline-block;
        width: 70px;
        height: 70px;
        text-align: center;
        line-height: 70px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
